<template>
    <h2>flex-nowrap</h2>
    <div class="tw:flex tw:flex-row tw:flex-nowrap tw:gap-1">
        <div class="tw:bg-sky-500 tw:basis-2/5 tw:flex tw:justify-center tw:items-center tw:rounded-md tw:h-8 tw:shrink-0">01</div>
        <div class="tw:bg-sky-500 tw:basis-2/5 tw:flex tw:justify-center tw:items-center tw:rounded-md tw:h-8 tw:shrink-0">02</div>
        <div class="tw:bg-sky-500 tw:basis-2/5 tw:flex tw:justify-center tw:items-center tw:rounded-md tw:h-8 tw:shrink-0">03</div>
    </div>
    <h2>flex-wrap</h2>
    <div class="tw:flex tw:flex-row tw:flex-wrap tw:gap-1">
        <div class="tw:bg-sky-500 tw:basis-2/5 tw:flex tw:justify-center tw:items-center tw:rounded-md tw:h-8 tw:shrink-0">01</div>
        <div class="tw:bg-sky-500 tw:basis-2/5 tw:flex tw:justify-center tw:items-center tw:rounded-md tw:h-8 tw:shrink-0">02</div>
        <div class="tw:bg-sky-500 tw:basis-2/5 tw:flex tw:justify-center tw:items-center tw:rounded-md tw:h-8 tw:shrink-0">03</div>
    </div>
    <h2>flex-wrap-reverse</h2>
    <div class="tw:flex tw:flex-row-reverse tw:flex-wrap-reverse tw:gap-1">
        <div class="tw:bg-sky-500 tw:basis-2/5 tw:flex tw:justify-center tw:items-center tw:rounded-md tw:h-8 tw:shrink-0">01</div>
        <div class="tw:bg-sky-500 tw:basis-2/5 tw:flex tw:justify-center tw:items-center tw:rounded-md tw:h-8 tw:shrink-0">02</div>
        <div class="tw:bg-sky-500 tw:basis-2/5 tw:flex tw:justify-center tw:items-center tw:rounded-md tw:h-8 tw:shrink-0">03</div>
    </div>
</template>